<template>
  <div class="c-minh" v-if="circleData">
    <div class="c-pb120">
      <div class="c-bd-b12-f5 c-bg-white c-ph24">
        <div class="c-mt40 c-flex-row c-justify-sb c-pb30 c-bd-b1-f6">
          <div class="c-w100 c-text-hidden c-hh180 c-ww180" v-if="circleData.avatar">
            <img class="c-w100 imgCloseBig c-br10 c-h c-object-fit-cover" :src="$addXossFilter(circleData.avatar, require('@/assets/defult270.png'))" alt="">
          </div>
          <div class="c-pl20 c-flex-grow1 c-flex-column c-justify-sb c-w0">
            <p class="c-fs32 c-lh44 c-fc-xblack c-text-ellipsis2 c-wb-ba">{{circleData.name}}</p>
            <div>
              <div class="c-fs20 c-fc-gray c-mb16">
                <span>{{circleData.memberCount | formatNumber}}名成员</span>
                <span class="c-mh10">|</span>
                <span>{{circleData.feedCount | formatNumber}}条动态</span>
              </div>
              <p class="c-fs22 theme-fc c-mt12" v-if="circleData.payType == 1">免费</p>
              <p class="c-fs22 theme-fc c-mt12" v-else-if="circleData.payType == 2">{{'￥' | iosPriceFilter}}{{circleData.price}}</p>
              <p class="c-fs22 theme-fc c-mt12" v-if="circleData.payType == 3">加密</p>
              <p class="c-fs22 theme-fc c-mt12" v-else-if="circleData.payType == 4">配套课程</p>
            </div>
          </div>
        </div>
        <div class="c-pv30 c-bd-b1-f6">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <p class="c-fs26 c-fc-xblack c-p active c-pl12">圈子简介</p>
            <div class="c-fs22 c-fc-gray" @click="isShowFirstEditDialog = true;" v-if="isCircleMaster">编辑<i class="iconfont c-pl6">&#xe635;</i></div>
          </div>
          <div class="c-fs22 c-fc-gray c-mt10" v-if="circleData.intro">
            <p>{{circleData.intro}}</p>
          </div>
        </div>
        <div class="c-pv30 c-bd-b1-f6">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <p class="c-fs26 c-fc-xblack c-p active c-pl12">圈主简介</p>
            <div class="c-fs22 c-fc-gray" @click="isShowSecondEditDialog = true;" v-if="isCircleMaster">编辑<i class="iconfont c-pl6">&#xe635;</i></div>
          </div>
          <div class="c-flex-row c-aligni-center c-mt20">
            <span class="c-fs22 c-fc-gray" v-if="circleData.hasCircleMaster == false">暂无圈主</span>
            <img class="c-ww48 c-hh48 imgCloseBig c-brp50" v-if="circleData.hasCircleMaster == true" :src="$addXossFilter(circleData.masterHeadimgurl, require('@/assets/defult_head.png'))" alt="">
            <span class="c-fs22 c-fc-sblack c-ml12" v-if="circleData.hasCircleMaster == true">{{circleData.masterNickname}}</span>
          </div>
          <div class="c-fs22 c-fc-sblack c-mt20" v-if="circleData.masterIntro">
            <p class="c-ph12 c-pv12 c-bg-f9 c-fc-gray c-ws-pw">{{circleData.masterIntro}}</p>
          </div>
        </div>
        <!-- 圈子公告 -->
        <div class="c-pv30 c-bd-bd-f6">
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <p class="c-fs26 c-fc-xblack c-p active c-pl12">圈子公告</p>
            <div class="c-fs22 c-fc-gray" v-if="isCircleMaster" @click="handleClickNotice()">编辑<i class="iconfont c-pl6">&#xe635;</i></div>
          </div>
          <div class="c-fs22 c-fc-sblack c-mt20">
            <div class="c-ph12 c-pv12 c-bg-f9">
              <p class="c-fc-gray c-ws-pw c-text-ellipsis2" @click="handleClickDialogNotice(circleData.notice)">{{circleData.notice == '' ? '暂无公告' : circleData.notice}}</p></div>
          </div>
        </div>
      </div>
      <div class="c-bd-b12-f5 c-bg-white c-ph24 c-pv24">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <p class="c-fs26 c-fc-xblack c-p active c-pl12">全部圈友</p>
          <div class="c-fs22 c-fc-gray" @click="getCircleFriends">全部{{circleData.memberCount}}人<i class="iconfont c-pl6">&#xe635;</i></div>
        </div>
        <div class="c-flex-row c-aligni-center c-mt24">
          <img class="c-ww48 c-hh48 imgCloseBig c-brp50 c-mr12" v-for="(item, index) in circleData.avatarList" :key="index" :src="$addXossFilter(item, require('@/assets/defult_head.png'))" alt="">
        </div>
      </div>
      <div class="c-bd-b12-f5 c-bg-white c-ph24 c-pv24">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <p class="c-fs26 c-fc-xblack c-p active c-pl12">群昵称</p>
          <div class="c-flex-row c-aligni-center c-pl24" @click="isShowCircleNickNameDialog = true;">
            <span class="c-fs22 c-fc-xblack c-textAlign-r c-mr12">{{circleData.myNickname}}</span>
            <i class="iconfont c-fs22 c-fc-gray">&#xe635;</i>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改圈子简介 -->
    <div v-show="isShowFirstEditDialog" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="cancelFirstEdit" data-type='cancel'></div>
      <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
        <div class="c-fs28 c-textAlign-c c-pt50 c-fw-b c-lh c-pb30">圈子简介</div>
        <div class="c-ph30 ">
          <div class="c-w100 c-fs20 c-mt10 c-p">
            <div class="c-ph12 c-pt12 c-pb30 c-w100 c-br8 c-bd1-ccc">
              <textarea class="c-bd0 c-w100 c-fs22 c-lh32 c-fc-xblack" rows="3" maxlength="50" v-model="editFirstTextarea"></textarea>
            </div>
            <span class="c-pa c-p-r30 c-p-b10 c-fc-sgray">{{editFirstTextarea.length}}/50</span>
          </div>
          <div class="c-hh50 c-lh50"></div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
          <div @click="cancelFirstEdit" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="saveFirstEdit" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 theme-fc">保存</div>
        </footer>
      </div>
    </div>
    <!-- 修改圈主简介 -->
    <div v-show="isShowSecondEditDialog" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="cancelSecondEdit" data-type='cancel'></div>
      <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
        <div class="c-fs28 c-textAlign-c c-pt50 c-fw-b c-lh c-pb30">圈主简介</div>
        <div class="c-ph30 ">
          <div class="c-w100 c-fs20 c-mt10 c-p">
            <div class="c-ph12 c-pt12 c-pb30 c-w100 c-br8 c-bd1-ccc">
              <textarea class="c-bd0 c-w100 c-fs22 c-lh32 c-fc-xblack" rows="3" maxlength="200" v-model="editSecondTextarea"></textarea>
            </div>
            <span class="c-pa c-p-r30 c-p-b10 c-fc-sgray">{{editSecondTextarea.length}}/200</span>
          </div>
          <div class="c-hh50 c-lh50"></div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
          <div @click="cancelSecondEdit" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="saveSecondEdit" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 theme-fc">保存</div>
        </footer>
      </div>
    </div>
    <!-- 修改群昵称 -->
    <div v-show="isShowCircleNickNameDialog" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="cancelSaveCircleNickName" data-type='cancel'></div>
      <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
        <div class="c-fs28 c-textAlign-c c-pt50 c-fw-b c-lh c-pb30">群昵称</div>
        <div class="c-ph30 ">
          <div class="c-w100 c-fs20 c-lh64 c-br10 c-bd1 c-mt10 c-p">
            <input type="text" autofocus="autofocus" maxlength="8" v-model="editCircleNickName" class="c-w100 c-bd0 c-text-indent20 c-h c-lh48 c-br10 c-fs26 c-pl30 c-pr80" />
            <span class="c-pa c-p-r30 c-p-t0 c-fc-sgray">{{editCircleNickName.length}}/8</span>
          </div>
          <div class="c-hh50 c-lh50"></div>
        </div>
        <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
          <div @click="cancelSaveCircleNickName" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
          <div @click="saveCircleNickName" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 theme-fc">保存</div>
        </footer>
      </div>
    </div>
    <div class="c-pf c-bg-white c-pv16 c-ph24 c-flex-row c-justify-end c-aligni-center c-p-b0 c-maxw640 c-p-l0 c-p-r0 c-mlr-auto c-box-shadow7">
      <div class="c-fs28 c-lh c-pv18 c-br30 theme-bg c-fc-white c-ww280 c-textAlign-c" @click="inviteFriends">邀请好友</div>
      <div class="c-fs28 c-lh c-pv18 c-br30 c-bds1-e6 c-fc-xblack c-ml24 c-ww280 c-textAlign-c" v-if="!isCircleMaster" @click="exitCircle">退出圈子</div>
      <div class="c-fs28 c-lh c-pv18 c-br30 c-bds1-e6 c-fc-xblack c-ml24 c-ww280 c-textAlign-c" v-if="isCircleMaster" @click="transferCircle">转移圈子</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let circleId = '';
export default {
  name: 'CircleData',
  components: {
  },
  data() {
    return {
      isCircleMaster: false, // 是否是圈主
      isShowCircleNickNameDialog: false, // 是否展示群昵称修改对话框
      isShowFirstEditDialog: false, // 是否展示群昵称修改对话框
      isShowSecondEditDialog: false, // 是否展示群昵称修改对话框
      editCircleNickName: '', // 编辑群昵称
      editFirstTextarea: '', // 编辑圈子简介
      editSecondTextarea: '', // 编辑圈主简介
      circleData: null, // 圈子资料信息
      ckFrom: global.ckFrom,
      shareSetting: null, // 分享信息
      bindPhoneSetting: null
    }
  },
  activated() {
    setDocumentTitle("圈子资料");
    getBindPhoneSetting(global.ckFrom.circle).then(res => {
      this.bindPhoneSetting = res;
    });
    this.initData();
  },
  deactivated() {
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    handleClickDialogNotice(message) {
      this.$cjConfirm({
        title: '圈子公告', //
        titleCenter: true, //标题是否居中
        message: message == '' ? '暂无公告' : message,
        messageCenter: false, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: false, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
        },
        onCancel() {
        },
      })
    },
    // 跳转到圈子公告
    handleClickNotice() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleNotice",
        query: {
          circleId: circleId
        }
      })
    },
    // 跳转到圈子
    handleClickCircleFeed() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: circleId
        }
      })
    },
    // 邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.circle;
      let extId = circleId;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: extId, ckFrom: ckFrom }
      });
    },
    // 取消保存圈子简介
    cancelFirstEdit() {
      this.editFirstTextarea = this.circleData.intro || '';
      this.isShowFirstEditDialog = false;
    },
    // 保存圈子简介
    saveFirstEdit() {
      if (this.editFirstTextarea.length == 0) {
        this.$showCjToast({
          text: '圈子简介不能为空',
          type: "warn",
        });
        return
      } else if (this.editFirstTextarea.length > 50) {
        this.$showCjToast({
          text: '圈子简介超过限制的长度',
          type: "warn",
        });
        return
      }
      let data = {
        role: this.isCircleMaster ? 2 : 1,
        intro: this.editFirstTextarea,
        introduce: this.circleData.masterIntro,
        nickname: this.circleData.myNickname
      }
      utilJs.postMethod(global.apiurl + `circle/editCircle/${circleId}`, data, res => {
        this.isShowFirstEditDialog = false;
        this.$set(this.circleData, 'intro', this.editFirstTextarea);
      });
    },
    // 取消保存群主简介
    cancelSecondEdit() {
      this.editSecondTextarea = this.circleData.masterIntro || '';
      this.isShowSecondEditDialog = false;
    },
    // 保存群主简介
    saveSecondEdit() {
      if (this.editSecondTextarea.length > 200) {
        this.$showCjToast({
          text: '群主简介超过限制的长度',
          type: "warn",
        });
        return
      }
      let data = {
        role: this.isCircleMaster ? 2 : 1,
        intro: this.circleData.intro,
        introduce: this.editSecondTextarea,
        nickname: this.circleData.myNickname
      }
      utilJs.postMethod(global.apiurl + `circle/editCircle/${circleId}`, data, res => {
        this.isShowSecondEditDialog = false;
        this.$set(this.circleData, 'masterIntro', this.editSecondTextarea);
      },);
    },
    // 取消保存群昵称
    cancelSaveCircleNickName() {
      this.editCircleNickName = this.circleData.myNickname || '';
      this.isShowCircleNickNameDialog = false;
    },
    // 保存群昵称
    saveCircleNickName() {
      if (this.editCircleNickName.length == 0) {
        this.$showCjToast({
          text: '群昵称不能为空',
          type: "warn",
        });
        return
      } else if (this.editCircleNickName.length > 8) {
        this.$showCjToast({
          text: '群昵称超过限制的长度',
          type: "warn",
        });
        return
      }
      let data = {
        role: this.isCircleMaster ? 2 : 1,
        introduce: this.circleData.masterIntro,
        intro: this.circleData.intro,
        nickname: this.editCircleNickName
      }
      utilJs.postMethod(global.apiurl + `circle/editCircle/${circleId}`, data, res => {
        this.isShowCircleNickNameDialog = false;
        this.$set(this.circleData, 'myNickname', this.editCircleNickName);
      });
    },
    // 退出圈子
    exitCircle() {
      let that = this;
      that.$cjConfirm({
        title: '确定退出圈子？', //
        titleCenter: true, //标题是否居中
        message: '若退出付费圈子，再次加入仍需付费哦~',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + `circle/exitCircle/${circleId}`, {circleId: circleId}, res => {
            that.$routerGo(that, "replace", {
              path: '/homePage/circle/exitCircleSuccess'
            })
          });
        },
        onCancel() {
        },
      })
    },
    // 跳转到圈友
    getCircleFriends() {
      this.$routerGo(this, "push", {
        path: '/homePage/circle/circleFriends',
        query: { circleId: circleId }
      })
    },
    // 转移圈子
    transferCircle() {
      this.$routerGo(this, "push", {
        path: '/homePage/circle/circleChange',
        query: { circleId: circleId }
      })
    },
    // 初始化数据
    initData() {
      circleId = this.$route.query.circleId;
      this.isCircleMaster = false;
      this.isShowCircleNickNameDialog = false;
      this.isShowFirstEditDialog = false;
      this.isShowSecondEditDialog = false;
      this.editCircleNickName = '';
      this.editFirstTextarea = '';
      this.editSecondTextarea = '';
      this.circleData = null;
      this.shareSetting = null;
      this.getCircleData();
    },
    // 获取圈子信息
    getCircleData() {
      utilJs.getMethod(global.apiurl + `circle/details/${circleId}?type=2`, res => {
        this.circleData = res || null;
        this.isCircleMaster = res.myRole == 2;
        this.editCircleNickName = res.myNickname || '';
        this.editFirstTextarea = res.intro || '';
        this.editSecondTextarea = res.masterIntro || '';
        this.shareSetting = res.shareSetting || null;
        this.wechatShare();
      }, failRes => {
        this.wechatShare();
        this.handleClickCircleFeed();
      });
    },
    //分享
    wechatShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.circleData ? this.circleData.name : window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.circleData ? this.circleData.avatar : window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/circle/circleFeed?refereeId=${localStorage.getItem("userId")}&id=${circleId}`;
      let shareDesc = this.circleData ? this.circleData.intro : '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style scoped>
textarea {
  outline: none !important;
  resize:none;
}
input {
  border: 0;
}
.c-bg-f9 {
  background-color: #f9f9f9;
}
.c-p-r30 {
  right: 0.75rem;
}
.c-bds1-e6{border:1px solid #e6e6e6;}
.active:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: .1rem;
  height: .5rem;
  margin-top: -.25rem;
  background: var(--mb7color);
  border-radius: .05rem;
  content: "";
}
</style>